<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view class="page">
    <image
      @click="back"
      style="
        position: absolute;
        top: 108rpx;
        left: 32rpx;
        width: 48rpx;
        height: 48rpx;
        z-index: 99;
      "
      src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_fanhui@3x.png"
      mode=""
    />
    <image
      class="bgi"
      src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/img_spjjibg.png"
      mode=""
    />
    <view class="quest" v-if="same">
      <video 
      style="width: 128rpx;height: 128rpx;border-radius: 8rpx;" 
      :src="same.popVideoUrl"></video>
      <view class="title">
        <view v-if="!isInput" @click="isInput = true" class="title-text">{{ sameTitle }}</view>
        <input v-else class="title-text" :focus="true" @blur="isInput = false" v-model="sameTitle" type="text">
        <view class="play-data">
          <view class="plays">
            <image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/znjj_icon_bfliangx.png"/>
            <text>{{conversion(same.comment)}}</text>
          </view>
          <view class="plays">
            <image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/znjj_icon_dzliang.png"/>
            <text>{{conversion(same.digg)}}</text>
          </view>
          <view class="plays">
            <image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/znjj_icon_syliang.png"/>
            <text>{{conversion(same.collect)}}</text>
          </view>
        </view>
      </view>
      <!-- <image v-if="false" @click="goBack" style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png" mode="" /> -->
    </view>
    <view class="top" @click="upLoad" style="position: relative;" :style="!same?'margin-top: 260rpx':''">
      <view class="top-title">
        <view style="display: flex; justify-content: space-between; width: 100%">
          <view style="display: flex; align-items: center">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_znjji.png"
              mode="scaleToFill"
            />
            <text style="font-size: 32rpx; color: rgb(48, 49, 51); font-weight: 500"
              >场景设置</text
            >
          </view>
          <!-- <switch color="#8e54f4" :checked="checked" @change="switch2Change" /> -->
          <view>
            <text style="color: rgb(142, 84, 244); font-size: 28rpx">{{
              script ? "已选择" : "去设置"
            }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouz.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
      <view class="number">
        <view class="video-box" v-for="(item, index) in arr" :key="item">
            <view class="mark"> {{ item }} </view>
            视频 {{ videoArr[index] ? videoArr[index].length : 0 }}
        </view>
      </view>
    </view>
    <view v-if="smart||oneClick||same" class="top">
      <view class="top-title" style="display: block;padding-bottom: 0;">
        <view style=" display: flex;justify-content: space-between; width: 100%" @click="gotoCopy()">
          <view style="display: flex; align-items: center">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_wagli.png"
              mode="scaleToFill"
            />
            <text style="font-size: 32rpx; color: rgb(48, 49, 51); font-weight: 500"
              >文案设置</text
            >
          </view>
          <view v-if="oneClick">
            <text v-if="!same||copy" style="color: rgb(144, 147, 153); font-size: 28rpx">{{
              copy.length ? `已设置` : "随机"
            }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"
              mode="scaleToFill"
            />
          </view>
          <view v-else>
            <text style="color: rgb(142, 84, 244); font-size: 28rpx">{{
              copy.length ? `${copy.length}条` : "去设置"
            }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              :src="same&&!copy?'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png':'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouz.png'"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="top-content" style="padding:30rpx 0 42rpx 0;">
        <view v-if="style" class="top-material" @click="gotoWebView">
          <text style="font-size: 30rpx;">样式设置</text>
          <view>
            <text style="color: rgba(144, 147, 153, 1)">{{ setStyle?'已设置':'' }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="top-material" @click="getFontColor()" style="margin-bottom: 0;">
          <view style="display: flex; align-items: center;">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_ztyse.png"
              mode="scaleToFill"
            />
            <text style="font-size: 30rpx;">字体颜色</text>
          </view>
          <view>
            <text style="color: rgba(144, 147, 153, 1)">{{
              color.length ? `${color.length}个` : "默认"
            }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
      </view>
    </view>
    <view v-if="master||publicity" class="top">
      <view class="top-title" style="display: block;padding-bottom: 0;">
        <view style=" display: flex;justify-content: space-between; width: 100%" @click="gotoVocie()">
          <view style="display: flex; align-items: center">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_kbszhi.png"
              mode="scaleToFill"
            />
            <text style="font-size: 32rpx; color: rgb(48, 49, 51); font-weight: 500"
              >口播设置</text
            >
          </view>
          <view>
            <text style="color: rgb(142, 84, 244); font-size: 28rpx">{{
              templateId? `已设置` : "去设置"
            }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              :src="same&&!copy?'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png':'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouz.png'"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="top-content" style="padding:30rpx 0 42rpx 0;">
        <view v-if="style" class="top-material" @click="gotoWebView">
          <text style="font-size: 30rpx;">样式设置</text>
          <view>
            <text style="color: rgba(144, 147, 153, 1)">{{ setStyle?'已设置':'' }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"
              mode="scaleToFill"
            />
          </view>
        </view>

        <!-- 口播音色 -->
        <view class="top-material" @click="getVoiceTimbre()" :style="master?'margin-bottom:30rpx':''">
          <view style="display: flex; align-items: center;">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_kbyse.png"
              mode="scaleToFill"
            />
            <text style="font-size: 30rpx;">口播音色</text>
          </view>
          <view>
            <text style="color: rgba(144, 147, 153, 1)">{{sound?sound.name:'默认'}}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"
              mode="scaleToFill"
            />
          </view>
        </view>

        <view v-if="master" class="top-material" @click="getFontColor()">
          <view style="display: flex; align-items: center;">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_wagli.png"
              mode="scaleToFill"
            />
            <text style="font-size: 30rpx;">字体颜色</text>
          </view>
          <view>
            <text style="color: rgba(144, 147, 153, 1)">{{
              color.length ? `${color.length}个` : "默认"
            }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        
      </view>
      </view>
    </view>
    <view v-if="publicity" class="top">
      <view class="top-title" style="display: block;padding-bottom: 0;">
        <view style=" display: flex;justify-content: space-between; width: 100%" @click="openTopCopy()">
          <view style="display: flex; align-items: center">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_wagli.png"
              mode="scaleToFill"
            />
            <text style="font-size: 32rpx; color: rgb(48, 49, 51); font-weight: 500"
              >顶部文案</text
            >
          </view>
          <view>
            <text style="color: rgb(144, 147, 153); font-size: 28rpx">{{
              topText? `已设置` : "默认"
            }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              src='https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png'
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="top-content" style="padding:30rpx 0 42rpx 0;">

        <!-- 字体颜色 -->
        <view class="top-material" @click="getFontColor()" style="margin-bottom: 0;">
          <view style="display: flex; align-items: center;">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_ztyse.png"
              mode="scaleToFill"
            />
            <text style="font-size: 30rpx;">字体颜色</text>
          </view>
          <view>
            <text style="color: rgba(144, 147, 153, 1)">{{
              color.length ? `${color.length}个` : "默认"
            }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        
      </view>
      </view>
    </view>
    <view v-if="originality" class="top">
      <view class="top-title" style="display: block;padding-bottom: 0;">
        <view style=" display: flex;justify-content: space-between; width: 100%" @click="gotoWebView()">
          <view style="display: flex; align-items: center">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_wagli.png"
              mode="scaleToFill"
            />
            <text style="font-size: 32rpx; color: rgb(48, 49, 51); font-weight: 500"
              >花字文案</text
            >
          </view>
          <view>
            <text v-if="!same||copy" style="color: rgb(142, 84, 244); font-size: 28rpx">{{
              setStyle? `已设置` : "去设置"
            }}</text>
            <image
              style="width: 48rpx; height: 48rpx; vertical-align: middle"
              :src="same&&!copy?'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png':'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouz.png'"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="top-content">
      </view>
      </view>
    </view>
    <view v-if="!same" class="top">
      <view class="top-title">
        <view  style="display: flex; justify-content: space-between; width: 100%">
          <view style="display: flex; align-items: center">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_bjyyue.png"
              mode="scaleToFill"
            />
            <text style="font-size: 32rpx; color: rgb(48, 49, 51); font-weight: 500"
              >背景音乐</text
            >
          </view>
          <view style="display: flex;align-items: center;">
          <picker mode="selector" style="width: 400rpx;height: 38rpx;display: flex;justify-content: flex-end;" :range="musicCate" range-key="name" 
            @change="changeMusic">
            <view class="uni-input">{{musicCate.length?musicCate[Number(musicChoose)].name:'动感'}}</view>
          </picker>
          <image
            style="width: 38rpx; height: 38rpx; vertical-align: middle"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"
            mode="scaleToFill"
          />
        </view>
        </view>
      </view>
    </view>
      <view v-if="!originality" class="item1" @click="goWebview">
        <view class="flex-left">
            <image style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_spfmian.png"/>
            封面样式
        </view>
        <view class="flex-right">
            {{isCover?'已上传':'去上传'}}
            <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"/>
        </view>
        
    </view>
    <view class="top">
      <view class="top-title">
        <view style="display: flex; justify-content: space-between; width: 100%">
          <view style="display: flex; align-items: center">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_hcszhi.png"
              mode="scaleToFill"
            />
            <text style="font-size: 32rpx; color: rgb(48, 49, 51); font-weight: 500"
              >合成设置</text
            >
          </view>
        </view>
      </view>
      <view class="top-content">
        <view class="top-material">
          <text style="font-size: 30rpx;">剪辑库名称</text>
          <view v-if="!isFocus" style="text-align: right;font-size: 30rpx;" @click="isFocus = true">{{ taskName }}</view>
          <input v-else focus="true" @blur="isFocus = false" style="text-align: right;font-size: 30rpx;" type="text" v-model="taskName">
        </view>
        <view class="middle-items" v-if="isOk">
        <view>
          <text>合成视频数量</text>
        </view>
        <uni-number-box
          v-model="num"
          :max="max"
          min="1"
          :input="false"
          @change="changeValue"
        />
      </view>
      </view>
    </view>

    <view class="bottom">
      <!-- <button v-if="!isOk" class="bottom-btn" :class="!isReady?'isready':''" @click="initiate">合成视频</button> -->
      <button hover-class="hover" class="bottom-btn" :class="!isReady?'isready':''" @click="creatVideo">自动合成</button>
    </view>
  </view>
  <uni-popup ref="fontColor" :safe-area="false" @change="popupChange">
    <view style="background-color: #fff; border-radius: 32rpx 32rpx 0 0">
      <view class="close">
        <image @click="close" class="close-btn" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
        设置字体颜色
      </view>
      
      <view class="popup-middle">
        <view
        v-for="item,index in colorList"
        :key="item.id"
          @click="chooseSize(index)"
          :class="{ 'font-active': size.includes(index) }"
          class="font"
          ><image style="width: 186rpx;height: 80rpx;" :src="item.img"/>
          <image
            v-if="size.includes(index)"
            class="font-img"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_xzong.png"
          />
        </view>
      </view>
      <view class="verify">
        <checkbox-group @change="randomAll">
          <label>
            <checkbox style="transform: scale(0.7)" :value="1" :checked="colorChecked"/>全部随机
          </label>
        </checkbox-group>
        <button hover-class="hover" @click="verify" class="verify-btn">确认选择</button>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="timbre" :safe-area="false" @change="popupChangeTim">
    <view style="background-color: #fff; border-radius: 32rpx 32rpx 0 0">
      <view class="close">
        <image @click="closeTim" class="close-btn" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
        口播音色
      </view>
      
      <view class="popup-middle">
        <view class="tim-item" v-for="item,index in soundList" :key="index" @click="timClick(item)">
          <view style="margin-right: 30rpx;">
              <aip-checkbox :key="keys" :check="sound.id==item.id"></aip-checkbox>
          </view>
          <view class="tim-voice" :class="sound.id==item.id?'active-tem':''">
            <view class="tim-character">
              <view class="tim-name">{{nameSplic(item.name)}}</view>
              {{item.name}}
            </view>
            <view class="tim-play" @click="audition(item,index)">{{item.play?'正在播放':'试听'}}</view>
            <!-- <audio :src="item.m4aPath"></audio> -->
          </view>
          
        </view>
      </view>
      <btnModule message="确认" @customClick="closeTim"/>
    </view>
  </uni-popup>
  <uni-popup ref="slice" :mask-click="false" @change="popupChange">
    <view class="slice-popup">
      <text class="slice-text">视频切片中...</text>
      <view class="progress" style="width: 100%;height: 48rpx;">
        <liuProgressbar
        :progress="percent"
        color="#303133"
        fontSize="28rpx"
        bgColor="#8e54f4"
        dsColor="#dedede"
        borderRadius="434rpx"
        height="48rpx" />
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="sliceOk" :mask-click="false" @change="popupChange">
    <view class="sliceok-popup">
      <view class="close1">
        <image @click="close" class="close-btn" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
        切片成功
      </view>
      <text class="tips">本次可合成视频数量{{ num }}条,合成需要花一定的时间,可稍后前往剪辑库列表查看最新成品</text>
      <view class="middle-items">
        <view>
          <text>合成视频数量</text>
        </view>
        <uni-number-box
          v-model="num"
          :max="max"
          min="1"
          :input="false"
          @change="changeValue"
        />
      </view>
      <button class="craft" @click="creatVideo1">自动合成</button>
    </view>
  </uni-popup>
  <uni-popup ref="masterPopup" :mask-click="false" @change="popupChange" >
    <view class="sliceok-popup" style="height: 442rpx;">
      <view class="close1">
        切片成功
      </view>
      <text class="tips">本次可合成视频数量{{ num }}条,合成需要花一定的时间,可稍后前往剪辑库列表查看最新成品</text> 
      <button class="craft" @click="creatVideo2">自动合成</button>
    </view>
  </uni-popup>
  <uni-popup ref="alertDialog" :mask-click="false" @change="popupChange">
		<view class="alert-dialog">
      <view class="alert-title">你有一份编辑草稿，是否要恢复?</view>
      <view class="alert-time">你{{ formatTimestamp(date) }}在小程序编辑了一份草稿</view>
      <view class="alert-btn">
        <view class="alert-quxiao" @click="draftCancel">取消</view>
        <view class="alert-queren" @click="draftRecover">恢复</view>
      </view>
    </view>
	</uni-popup>
  
  <uni-popup ref="popup" @change="popupChange">
    <view class="content">
      <view class="close">
        <image
          class="close-btn"
          @click="close1()"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        产品库
        <text @click="close1(1)" class="addbtn" :class="!cusTitle ? 'disable' : ''"
          >新增</text
        >
      </view>
      <view style="overflow-y: scroll;width: 100%;height: 733rpx;">
        <view class="tips">提示：系统根据产品自动生成口播内容，请选择与视频宣传相关的产品！</view>
        <view style="display: flex;align-items: center;justify-content: space-between;padding: 0 30rpx 0 30rpx;margin-bottom: 30rpx;" @click="templateClick(item)" v-for="item in templates" :key="item.id">
          <view style="margin-right: 30rpx;">
              <aip-checkbox :key="keys" :check="templateId.id==item.id"></aip-checkbox>
        </view>
        <view class="item" :class="templateId.id==item.id?'active-tem':''" >
            <view class="name">
              <text>产品名称</text>
              <text class="text">{{item.product}}</text>
            </view>
            <view class="name">
              <text>产品价格</text>
              <text class="text">{{item.price}}</text>
            </view>
      </view>
        </view>
      <view class="flxed">
        <button @click="into" class="tianjia tianjia-style">确认</button>
      </view>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="addO" @change="popupChange">
    <view class="content">
      <view class="close">
        <image 
          class="close-btn"
          @click="close1(0)"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        添加新产品
      </view>
      <view class="from">
        <view class="name">
          <text>产品名称<text style="color: rgb(255, 55, 71)">*</text></text>
          <input v-model="product" class="input" type="text" placeholder="如双人套餐">
        </view>
        <view class="name">
          <text>产品价格<text style="color: rgb(255, 55, 71)">*</text></text>
          <input v-model="price" class="input" type="digit" placeholder="如29.9">
        </view>
      </view>
        <btnModule message="确认" @customClick="getOk" />
    </view>
    
  </uni-popup>
  <uni-popup ref="topCopy" @change="popupChange">
    <view style="background-color: #fff; border-radius: 32rpx 32rpx 0 0">
      <view class="close">
        <image @click="closeTop" class="close-btn" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
        顶部文案
      </view>
      <view class="popup-middle">
        <text  style="display: block;margin-bottom:30rpx;font-size: 24rpx;color: rgb(252,139,0);">提示：顶部文案最多输入10个字符</text>
        <fui-textarea 
        @confirm='changeInput'
        @click="changeInput"
        @blur="changeInput"
        @focus="changeInput"
        v-model="topText"
        maxlength="10"
        height="260rpx"
        size="28"
        :borderTop="false"
        radius="16"
        :borderBottom="false"
        textareaBorder
        borderColor="rgb(220,223,230)"
        :padding="['30rpx','30rpx','30rpx','30rpx']"
        placeholder-style="color:rgb(144,147,153)" 
        placeholder="请输入内容" />
      </view>
      <btnModule message="确认" @customClick="closeTop"/>
    </view>
  </uni-popup>

  <loading v-if="isLoad" />
</template>

<script setup>
import { ref } from "vue";
import { httpRequest } from "../../utils/http";
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";
import liuProgressbar from "../../components/components/liu-progressbar_1.0.3/components/liu-progressbar/liu-progressbar.vue"
import aipCheckbox from "../../components/index/aip-checkbox.vue"
import btnModule from "../../components/index/btnModule.vue"
import loading from "../../components/index/loading.vue";
const percent = ref(0);
const index = ref(0);
const num = ref(1);
const script = ref("");
const only = ref("");
const seeding = ref("");
const isOk = ref(false) //判断是否可以切片
const isInput = ref(false)
const smart = ref(0)
const oneClick = ref(0)
const originality = ref(0)
const isFocus = ref(false)
const back = () => {
  uni.navigateBack({ delta: 1 });
};
const randomTitle = ref("");
const randomLabel = ref("");
const randomCopy = ref("");
const videoArr = ref([]);
const videoLongArr = ref([]);
const shopCate2Id = ref("");
const current = ref(uni.getStorageSync("music"));
const shopCate1Id = ref("");
const copy = ref(uni.getStorageSync("copy"));
const title = ref(uni.getStorageSync("title"));
const label = ref(uni.getStorageSync("label"));
const voice = ref(uni.getStorageSync("voice") || "");
const isActive = ref(uni.getStorageSync("active") ? uni.getStorageSync("active") : false);
const isSlice = ref(false);
const master = ref('')
const colorChecked = ref(false)
const arr = ref(master.value?[1,2,3,4,5]:[1, 2, 3]);
const noAlertDialog = ref(false)
const color = ref(uni.getStorageSync('color')||[]);
const show = ref(false)
const isLoad = ref(false)
const topCopy = ref()
const topText = ref('')
const openTopCopy = () => {
  topCopy.value.open('bottom')
}
const closeTop = () => {
  topCopy.value.close()
}
const popupChange = (e) => {
  show.value = e.show
}
const changeInput = (e) => {
    if(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu.test(topText.value)) uni.showToast({title:'不可以输入特殊字符',icon:'none'})
    topText.value = topText.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu, "")
    console.log(topText.value);
}
const popupChangeTim = (e) => {
  audio.stop()
  soundList.value.forEach(e=>{
    e.play = false
  })
  audio = uni.createInnerAudioContext()
  show.value = e.show
}
const max = ref(num.value);
const isCross = ref(0)
const same = ref('')
const conversion = (num) => {
  let n = Number(num)
  if(n>=10000)return `${(n/10000).toFixed(1)}w`
  if(n>=100000000)return `${(n/100000000).toFixed(1)}亿`
  if(n<10000)return n
}
const sameTitle = ref('')
const taskName = ref('')
const sliceOk = ref(null)
const masterPopup = ref(null)
const date = ref('')
const alertDialog = ref(null)
const indexPage = ref('')
const samePage = ref('')
const page = ref('')
const musicCate = ref([])
const musicName = ref('')
const selectedMusic = ref(1)
const getMusicCate = async() => {
  const res = await httpRequest('/api/musicCateList','POST')
  console.log(res);
  musicCate.value = res.data
  selectedMusic.value = res.data[0].id
  musicCate.value.unshift({
    id:0,
    name:'无'
  })
}
getMusicCate()
const goWebview = () => {
  if(!videoArr.value.length)return uni.showToast({title:'请先上传视频',icon:'none'})
  if(!copy.value&&(smart.value||same.value))return uni.showToast({title:'请先上传文案',icon:'none'})
  if(!templateId.value&&(master.value||publicity.value))return uni.showToast({title:'请先选择模板',icon:'none'})

  if(smart.value||same.value){
    let copyList = ''
    copy.value.forEach((e,i)=>{
      if(i == copy.value.length-1){
      copyList = copyList + e.content
      }else{
      copyList = copyList + e.content + '，'
      }
    })
    console.log(copyList);
    copyList = copyList.split(/[\n，。！？、：；……]/)
    copyList = copyList.filter(e=>e.length)
    console.log(copyList);
    uni.navigateTo({ url: `/pageA/index/coverWeb?text=${JSON.stringify(copyList)}` })
  }else if(oneClick.value){
    uni.navigateTo({ url: `/pageA/index/coverWeb?text=oneClick` })
  }else if(master.value){
    uni.navigateTo({ url: `/pageA/index/coverWeb?text=${JSON.stringify(text.value)}` })
  }else if(publicity.value){
    uni.navigateTo({ url: `/pageA/index/coverWeb?text=${JSON.stringify(text.value)}` })
  }
  
}
const text = ref('')
const style = ref(false)
const popup = ref()
const addO = ref()
const gotoVocie = () => {
  uni.vibrateShort()
    popup.value.open('bottom')
}
const into = async() => {
  if(uni.getStorageSync('videoArr')&&uni.getStorageSync('videoArr').filter(e=>e.length).length>=5&&templateId.value){
        isReady.value = true
      }else{
        isReady.value = false
      }
  if(uni.getStorageSync('videoArr')&&uni.getStorageSync('videoArr').filter(e=>e.length).length>=3&&templateId.value){
        isReady.value = true
      }else{
        isReady.value = false
      }
  if(templateId.value){
    const res = await httpRequest('/api/getTemplateRanOn1','POST',{
    templateId:templateId.value.id,
    shopCate2Id:shopCate2Id.value,
  })
  console.log(res);
  text.value = res.data.map(e=>e.content)
  }
  popup.value.close()
}
const templates = ref([])
const templateId = ref(uni.getStorageSync('templateId')||'')
const getTemplate = async() => {
      const res = await httpRequest('/api/getTemplate','POST',{
        shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId,
      })
  console.log(res);
  templates.value = res.data
}
const templateClick = (e) => { 
      uni.vibrateShort() 
      templateId.value = e
      
      if(uni.getStorageSync('taskId')){
      httpRequest('/api/generateTitle','POST',{
        shopId:uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
        taskId:uni.getStorageSync('taskId'),
      })
      }
      0
    }
const close1 = (i) => {
      if(i){
        popup.value.close()
        addO.value.open('bottom')
      }else{
        addO.value.close()
        popup.value.close()
      }
    }
const musicChoose = ref(0)
const changeMusic = (e) => {
  console.log(e.detail);
  musicChoose.value = e.detail.value
  selectedMusic.value = musicCate.value[Number(e.detail.value)].id
}
const masterCheck = ref(null)

// 获取音色数组
const soundList = ref([])
const getTimbre = async() => {
  const res = await httpRequest('/api/soundList','POST')
  console.log(res);
  soundList.value = res.data
  soundList.value.forEach(e=>{
    e.play = false
  })
}
getTimbre()
// 打开音色弹窗
const timbre = ref()
const getVoiceTimbre = () => {
  timbre.value.open('bottom')
}

//关闭音色弹窗 
const closeTim = () => {
  timbre.value.close()
}

// 点击音色item
const sound = ref('')
const timClick = (e) => {
  sound.value = e
}

// 音色名称字符串分割
const nameSplic = (e) => {
  return e.slice(-2)
}

// 试听
// const audio = ref('')
let audio = uni.createInnerAudioContext()
const audition = (e,i) => {
  audio.src = e.m4aPath
  if(e.play){
    soundList.value[i].play = false
    audio.stop()
    audio = uni.createInnerAudioContext()
  }else{
    soundList.value.forEach(e=>e.play=false)
    soundList.value[i].play = true
    audio.play()
  }
}
audio.onPlay(e=>{
  console.log('播放');
})
audio.onStop(e=>{
  console.log('停止');
})
audio.onError(e=>{
  console.log(e);
  console.log('播放错误');
})
audio.onEnded(e=>{
  audio.stop()
  soundList.value.forEach(e=>e.play=false)
  audio = uni.createInnerAudioContext()
})

const publicity = ref('')
//页面加载事件
onLoad(async (e) => {
  if (e.Originality) {
    if(e.Originality==3)noAlertDialog.value = true
    originality.value = e.Originality
  }
  const res1 = await httpRequest('/api/getVideosOne2','POST',{
    businessId: uni.getStorageSync("business").businessId,
  })
  if(!res1.data.length){
    videoArr.value = []
    uni.removeStorageSync('videoArr')
  }
   res1.data.forEach(e=>{
    videoArr.value[e.index-1] = e.lists
    console.log(videoArr.value);
  })
  uni.setStorageSync('videoArr',videoArr.value)
  if(e.publicity){
    publicity.value = 1
    getTemplate()
    page.value = 'pub'
    arr.value = [1, 2, 3, 4, 5]
  }
  if(e.pub==3){
    page.value = 'pub'
    arr.value = [1, 2, 3, 4, 5]
      noAlertDialog.value = true
      publicity.value = 1
      getTemplate()
    }
  if(e.same==3){
    noAlertDialog.value = true
    same.value = uni.getStorageSync('same')
    sameTitle.value = same.value.title
    uni.setStorageSync('sameTitle',sameTitle.value)
  }
  if(e.videoObj){
    page.value = 'same'
    same.value = uni.getStorageSync('same')
    sameTitle.value = same.value.title
    uni.setStorageSync('sameTitle',sameTitle.value)
  }
  // if(uni.getStorageSync('same')){
  //   same.value = uni.getStorageSync('same')
  //   sameTitle.value = same.value.title
  // }
  if (uni.getStorageSync("time")) {
      time.value = uni.getStorageSync("time");
      isSlice.value = true;
      console.log('time'+time.value);
  }
  if (uni.getStorageSync("maxNum")) {
    max.value = uni.getStorageSync("maxNum");
    num.value = uni.getStorageSync("maxNum");
  }
  taskName.value = same.value?currentDate() + "剪同款"+getCurrentTimestamp():currentDate() + "剪辑任务"+getCurrentTimestamp()
  uni.setStorageSync("name", taskName.value);
  if (e.index) {
    if(e.smart==3) noAlertDialog.value = true
    uni.setStorageSync("index", e.index);
    page.value = 'index'
    smart.value = 1
  }
  //   if((!style.value&&uni.getStorageSync("videoArr").length>=3)||(uni.getStorageSync("videoArr").length>=3&&same.value)||(uni.getStorageSync("videoArr").length>=3&&setStyle.value&&style.value)){
  //   isReady.value = true
  // }else{
  //   isReady.value = false
  // }
  index.value = Number(uni.getStorageSync("index"));
  //判断任务是否剪切完成
  const res = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
    });
    console.log(res);
    if(!res.data){
      if((uni.getStorageSync('prevPage')=='same' && page.value == 'index')||(uni.getStorageSync('prevPage')=='index' && page.value == 'same')){
        copy.value = ''
        uni.removeStorageSync('copy')
        color.value = []
        uni.removeStorageSync('color')
        uni.removeStorageSync('font')
        uni.removeStorageSync('isSlice')
        uni.removeStorageSync('isCross')
        isCross.value = 0
        isSlice.value = false
        font.value = []
      }
    }
    if (e.oneClick) {
      if(e.oneClick==3) noAlertDialog.value = true
    //一键成片
    oneClick.value = e.oneClick
      //如果上传文案后切换场景则删除保存的文案
    if(uni.getStorageSync('copyPage')!='oneClick'&&!res.data){
      uni.removeStorageSync('copy')
      uni.removeStorageSync('copyPage')
    }
  }
  //智能剪辑
  if(e.index){
    if(uni.getStorageSync('copyPage')!='smart'&&!res.data){
        uni.removeStorageSync('copy')
        uni.removeStorageSync('copyPage')
    }
  }
  //剪同款
  if(e.videoObj){
    if(uni.getStorageSync('copyPage')!='same'&&!res.data){
      uni.removeStorageSync('copy')
      uni.removeStorageSync('copyPage')
    }
  }
    /*如果有任务的话 判断草稿为哪个 
      samePage{
        samePage:1 草稿为普通
        samePage:2 草稿为剪同款
        samePage:3 草稿为达人探店
      }
    */
    if(e.master==3){
      noAlertDialog.value = true
      master.value = 1
    arr.value = [1, 2, 3, 4, 5]
      getTemplate()
    } 
    if(res.data){
      date.value = res.data.createDate
      taskId.value = res.data.id
      if(!noAlertDialog.value){
        alertDialog.value.open('center')
      }
      samePage.value = res.data.type
    }
    if(e.master&&!res.data){
    //达人探店
    master.value = 1
    arr.value = [1, 2, 3, 4, 5]
      getTemplate()
  }
  if(e.master){
    page.value = 'master'
  }
});    
const ai = ref("");
const time = ref(0);
const setStyle = ref('')
//开始切片状态
const isReady = ref(false)

const product = ref('')
const price = ref('')
const getOk = async() => {
  if (!product.value.trim().length)
    return uni.showToast({ title: "请输入产品名称", icon: "none" });
  if (!price.value.trim().length)
    return uni.showToast({ title: "请输入产品价格", icon: "none" });
  if(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu.test(product.value))return uni.showToast({title:'不可以输入特殊字符',icon:'none'})
    //新增文案
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    const res = await uni.request({
      url: "https://www.diandianyouke.cn:8081/api/addTemplate",
      data: {
        product: product.value.trim(),
        shopName:uni.getStorageSync("shop")[uni.getStorageSync("index")].shopName,
        price: price.value.trim(),
        shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
      },
      timeout: 50000,
      header: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
    });
    uni.hideLoading();
    uni.showToast({
      title: "添加成功",
      icon: "none",
    });
    getTemplate();
    templateId.value = res.data.data
    addO.value.close()
    popup.value.open('bottom')
    product.value = "";
    price.value = "";
  }
const voiceArr = ref('')


const isCover = ref(false)
const getCover = async() => {
  const res = await httpRequest('/api/getVideo1FpsSave','POST',{
    businessId:uni.getStorageSync("business").businessId,
  })
  if(!res.data){
    isCover.value = false
  }else{
    isCover.value = true
  }
}
//页面显示事件
onShow(async() => {
  getCover()
  const res1 = await httpRequest('/api/getVideosOne2','POST',{
    businessId: uni.getStorageSync("business").businessId,
  })
  if(!res1.data.length){
    videoArr.value = []
    uni.removeStorageSync('videoArr')
  }else{
  videoArr.value = []
   res1.data.forEach(e=>{
    videoArr.value[e.index-1] = e.lists
    console.log(videoArr.value);
  })
  console.log(videoArr.value);
  console.log(videoArr.value[1]);
  uni.setStorageSync('videoArr',videoArr.value)
  }
  if(uni.getStorageSync('voiceArr')){
    let voice = uni.getStorageSync('voiceArr')
    voiceArr.value = voice.filter(e=>e.length)
    voiceArr.value.forEach((e)=>{
      e.forEach(e=>delete e.type)
    })
    console.log('口播',voiceArr.value);
  }
  //获取临时文件
  const res = await httpRequest('/api/getVideosOne2','POST',{
    businessId: uni.getStorageSync("business").businessId,
  })
  if(!res.data.length){
    videoArr.value = []
    uni.removeStorageSync('videoArr')
  }
   res.data.forEach(e=>{
    videoArr.value[e.index-1] = e.lists
   })

   //获取当前视频组是否是横屏 如若横屏则不可以选择花字模板
  if(uni.getStorageSync('isCross')&&videoArr.value.length){
    isCross.value = uni.getStorageSync('isCross')
  } else {
    isCross.value = 0
  }
  //如果视频组为横屏开关状态改为false
  if(isCross.value==2)style.value = false

  uni.showLoading({
    title: '请稍后',
    mask: false
  })
   //获取是否上传花字图片
   const res2 = await httpRequest('/api/getUploadImage','POST',{businessId:uni.getStorageSync("business").businessId})
  setStyle.value = res2.data
  uni.hideLoading()

  //页面显示判断切片按钮是否可以点击
  let oi = videoArr.value.filter(e=>e.length).length
  console.log('oi',oi);
  isReady.value=false
  if(smart.value&&oi>=3&&uni.getStorageSync('copy')&&uni.getStorageSync('copy').length){
    isReady.value = true
    console.log('smart');
  }
  if(oneClick.value&&oi>=3){
    isReady.value = true
    console.log('oneClick');
  }
  if(master.value==1&&oi>=5&&templateId.value) isReady.value = true
  if(master.value==2&&oi>=5&&uni.getStorageSync('voiceArr').filter(e=>e.length)) isReady.value = true
  if(originality.value&&oi>=3&&setStyle.value) isReady.value = true
  if(same.value&&oi>=3&&uni.getStorageSync('copy')&&uni.getStorageSync('copy').length) isReady.value = true
  if(publicity.value&&oi>=3&&templateId.value) isReady.value = true

  //获取任务Id
  if(uni.getStorageSync('taskId')){
    id.value = uni.getStorageSync("taskId");
  }

  if (uni.getStorageSync("videoArr")) {
    videoArr.value = uni.getStorageSync("videoArr");
  }
  // if (uni.getStorageSync("v1")) {
  //   videoArr1.value = uni.getStorageSync("v1"); //视频数组
  //   videoArr2.value = uni.getStorageSync("v2"); //视频数组
  //   videoArr3.value = uni.getStorageSync("v3"); //视频数组
  // }
  // if (uni.getStorageSync("voice")) {
  //   voice.value = uni.getStorageSync("voice");
  // }
  
  //分类Id
  shopCate2Id.value = uni.getStorageSync("shop")[Number(index.value)].shopCate2Obj.shopCate2Id;
  shopCate1Id.value = uni.getStorageSync("shop")[Number(index.value)].shopCate1Obj.shopCate1Id;

  //获取文案
  copy.value = uni.getStorageSync("copy");
  // videoArr1.value = uni.getStorageSync("v1");
  // videoArr2.value = uni.getStorageSync("v2");
  // videoArr3.value = uni.getStorageSync("v3");
  if (uni.getStorageSync("script") && uni.getStorageSync("nonrandom")) {
    script.value = uni.getStorageSync("script");
  }
  // max.value = isActive.value ? 1 : number.value;
  // if (max.value >= 4) max.value = 4;
});


// samePage smart 草稿为普通
// samePage same 草稿为剪同款
// samePage master1||master2 草稿为达人探店
// samePage oneClick 草稿为一键成片
// samePage ori 草稿为创意视频
// samePage publicity 草稿为产品宣传
//恢复
const draftRecover = async() => {
  console.log(samePage.value);
  //获取任务状态
  const res = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
    });
  if(!res.data){

  }else if(!res.data.start){
    //如果草稿在切片状态打开进度条弹窗执行进度条动画函数
    console.log('切片中');
    actived();
    isSlice.value = uni.getStorageSync('isSlice')
    percent.value = uni.getStorageSync("percent");
    slice.value.open()
  }else if(res.data.start==1){
    //切片完成状态关闭进度条并弹窗
    console.log('切片完成');
    clearInterval(timeId.value);
    isSlice.value = false
    isOk.value = true
    percent.value=0
    // sliceOk.value.open()
    if(res.data.type == 'master'){
      //达人探店需要在切片后获取最大生成数量
     const res = await httpRequest('/api/clipVoiceVideoTime','POST',{
        businessId: uni.getStorageSync("business").businessId,
        taskId:taskId.value
      })
      console.log(res);
      num.value = res.data.maxNum
      masterPopup.value.open()
    }
    slice.value.close()//进度条弹窗
  }else{
    clearInterval(timeId.value);
    isSlice.value = false
    percent.value=0
  }
  if(res.data.start==4){
    //服务端出错提示
    draftCancel()
    uni.showToast({title:'出错啦,请重试',icon:'error'})
  }
  if(res.data.type == 'master2'||res.data.type == 'pub'){
      uni.redirectTo({ url: '/pageA/index/textVideo' })
    }
  //草稿为智能剪辑
  if(samePage.value=='smart'){
    same.value = ''
    uni.removeStorageSync('same')
    uni.removeStorageSync('sameTitle')
    master.value = ''
    smart.value = samePage.value
    oneClick.value = ''
     originality.value = ''
     publicity.value = ''
  }
  //草稿为一键成片
  if(samePage.value=='oneClick'){
    same.value = ''
    uni.removeStorageSync('same')
    uni.removeStorageSync('sameTitle')
    master.value = ''
    smart.value = ''
    oneClick.value = samePage.value
     originality.value = ''
     publicity.value = ''
  }
  //草稿为剪同款
  if(samePage.value == 'same'){
    same.value = uni.getStorageSync('same')
    sameTitle.value = uni.getStorageSync('sameTitle')
    master.value = ''
    smart.value = ''
    oneClick.value = ''
    originality.value = ''
    publicity.value = ''
  }
  //草稿为达人探店
  if(samePage.value == 'master1'){
    same.value = ''
    uni.removeStorageSync('same')
    uni.removeStorageSync('sameTitle')
    master.value = 1
    smart.value = ''
    oneClick.value = ''
     originality.value = ''
     publicity.value = ''
    arr.value = [1, 2, 3, 4, 5]
    getTemplate()
  }
  if(samePage.value == 'master2'){
    same.value = ''
    uni.removeStorageSync('same')
    uni.removeStorageSync('sameTitle')
    master.value = 2
    smart.value = ''
    oneClick.value = ''
     originality.value = ''
     publicity.value = ''
    arr.value = [1, 2, 3, 4, 5]
    getTemplate()
  }
  //草稿为创意视频
  if(samePage.value == 'ori'){
    same.value = ''
    uni.removeStorageSync('same')
    uni.removeStorageSync('sameTitle')
    master.value = ''
    smart.value = ''
    oneClick.value = ''
    originality.value = 1
    publicity.value = ''
  }
  //草稿为产品宣传
  if(samePage.value == 'pub1'){
    same.value = ''
    uni.removeStorageSync('same')
    uni.removeStorageSync('sameTitle')
    master.value = ''
    smart.value = ''
    oneClick.value = ''
    originality.value = ''
    publicity.value = 1
    getTemplate()
    arr.value = [1, 2, 3, 4, 5]
  }
  console.log(videoArr.value);
  let oi = videoArr.value.filter(e=>e&&e.length).length
  console.log('oi',oi);
  isReady.value=false
  if(smart.value&&oi>=3&&uni.getStorageSync('copy')&&uni.getStorageSync('copy').length){
    isReady.value = true
    console.log('smart');
  }
  if(oneClick.value&&oi>=3){
    isReady.value = true
    console.log('oneClick');
  }
  if(master.value==1&&oi>=5&&templateId.value) isReady.value = true
  if(publicity.value==1&&oi>=3&&templateId.value) isReady.value = true
  if(master.value==2&&oi>=5&&uni.getStorageSync('voiceArr').filter(e=>e.length)) isReady.value = true
  if(originality.value&&oi>=3&&setStyle.value) isReady.value = true
  if(same.value&&oi>=3&&uni.getStorageSync('copy')&&uni.getStorageSync('copy').length) isReady.value = true
  alertDialog.value.close()

}
//取消
const draftCancel = async() => {
  isReady.value = false
  //删除临时文件
    await httpRequest('/api/delStaging','POST',{
    businessId: uni.getStorageSync("business").businessId,
  })
  //删除任务
  await httpRequest('/api/delTask','POST',{
    taskId:taskId.value
  })
  copy.value = ''
  uni.removeStorageSync('copy')
  num.value = 0
  uni.removeStorageSync('maxNum')
  uni.removeStorageSync('time')
  uni.removeStorageSync('v1')
  uni.removeStorageSync('v2')
  uni.removeStorageSync('v3')
  uni.removeStorageSync('v4')
  uni.removeStorageSync('v5')
  uni.removeStorageSync('v6')
  uni.removeStorageSync('v7')
  uni.removeStorageSync('videoArr')
  uni.removeStorageSync('product')
  uni.removeStorageSync('taskId')
  uni.removeStorageSync('percent')
  uni.removeStorageSync('isSlice')
  uni.removeStorageSync('color')
  uni.removeStorageSync('font')
  uni.removeStorageSync('isCross')
  uni.removeStorageSync('voiceArr')
  uni.removeStorageSync('isItem')
  uni.removeStorageSync('templateId')
  uni.removeStorageSync('isSwitch ')
  uni.removeStorageSync('textList')
  uni.removeStorageSync('up')
  uni.removeStorageSync('num')
  isCross.value = 0
  color.value = []
  font.value = []
  videoArr.value = []
  if(page.value!='same'){
    same.value = ''
    uni.removeStorageSync('same')
    uni.removeStorageSync('sameTitle')
  }
 if(page.value=='master'){
      arr.value = [1, 2, 3, 4, 5]
      master.value = 1
      getTemplate()
 }
 if(page.value=='pub'){
      arr.value = [1, 2, 3, 4, 5]
      publicity.value = 1
      getTemplate()
 }
  // if(indexPage.value){
  //   uni.removeStorageSync('same')
  //   same.value = ''
  // }
  isSlice.value = false
  alertDialog.value.close()
  }
//开始切片
const slice = ref(null)//切片进度条弹窗
const taskId = ref('')
const initiate = async() => {
  if(!isReady.value)return
  uni.showLoading({
    title: '请稍后',
    mask: true
  })
  const ress = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
    });
    uni.hideLoading()
    if(ress.data==2)return uni.showToast({title:'现有未生成的视频',icon:'none'})
    let x = true
    if(master.value){
      //如果开关为true则判断是否上传了模板 开关为false则判断是否上传口播文案
      if(uni.getStorageSync('isSwitch')){
        if(!uni.getStorageSync('templateId')){ 
          x = false
          return uni.showToast({title:'请先上传模板',icon:'none'})
        } 
      }else{
        if(uni.getStorageSync('voiceArr')){
          // if(!(uni.getStorageSync('voiceArr').some(e=>e.length>0))){
          //    x = false
          //    return uni.showToast({title:'请先上传模板',icon:'none'})
          //   }
          uni.getStorageSync('voiceArr').forEach((e,i)=>{
            console.log(uni.getStorageSync('videoArr')[i]);
            if(uni.getStorageSync('videoArr')[i]&&uni.getStorageSync('videoArr')[i].length){
              if(!e.length)return x = false
            }
          })
        }
      }
    }
    if(!x)return uni.showToast({title:'请先上传口播模板',icon:'none'})
  uni.showLoading({
    title: "上传中",
    mask:true,
  });
  taskId.value = uni.getStorageSync('taskId');
  console.log(taskId.value);
  //获取切片时长和最大生成数量
  const tres = await httpRequest("/api/clipVideoTime", "POST", {
    businessId: uni.getStorageSync("business").businessId,
    taskId: taskId.value,
    time:uni.getStorageSync('same').time?uni.getStorageSync('same').time:0
  });
  time.value = (tres.data.time)*2
  uni.setStorageSync("time",time.value);
  uni.setStorageSync("maxNum", tres.data.maxNum);
  num.value = tres.data.maxNum
  max.value = tres.data.maxNum
  uni.setStorageSync("taskId", taskId.value);
  uni.setStorageSync("notTime", 1);

  //生成标题
  httpRequest('/api/generateTitle','POST',{
    shopId:uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
    taskId:taskId.value,
    product:uni.getStorageSync('templateId')?uni.getStorageSync('templateId').product:''
  })

  if(master.value){
    size.value = size.value.length?size.value:['shs.otf','fzjh.ttf','hklj.TTF','mksj.ttf','ssry.ttf','txjz.ttf']
    let voice = uni.getStorageSync('voiceArr')
    voice = voice.filter(e=>e.length)
    voice.forEach((e)=>{
      e.forEach(e=>delete e.type)
    })
    let text = voice.length?voice:''
    if (!color.value.length) color.value = colorList;
    console.log(color.value);
    console.log(size.value);
    uni.request({
      url: "https://www.diandianyouke.cn:8081/api/clipVideosAccordingVoiceTime",
      method: "POST",
      data: {
        businessId: uni.getStorageSync("business").businessId,
        taskId: taskId.value,
        ttfs:size.value[Math.floor(Math.random() * size.value.length)],
        fontColor:color.value[Math.floor(Math.random() * color.value.length)].color,
        fontBinColor:color.value[Math.floor(Math.random() * color.value.length)].strokeColor,
        templateId:uni.getStorageSync('isSwitch')?uni.getStorageSync('templateId').id:'',
        text:!uni.getStorageSync('isSwitch')?text:'',
        time:time.value/2,
        // musicCateId:selectedMusic.value,
      },
      timeout: 0,
      success: async (res) => {
        console.log("请求结果");
        console.log(res);
        isOk.value = true
      },
      fail: (err) => {
        console.log(err);
      },
      complete:() => {
        console.log('接口已调用');
      }
    });
  }else{
    uni.request({
      url: "https://www.diandianyouke.cn:8081/api/clipVideosOne2s",
      method: "POST",
      data: {
        businessId: uni.getStorageSync("business").businessId,
        taskId: taskId.value,
        popVideoId:same.value.popVideoId?same.value.popVideoId:0
      },
      timeout: 0,
      success: async (res) => {
        console.log("请求结果");
        console.log(res);
        isOk.value = true
      },
      fail: (err) => {
        console.log(err);
      },
    });
  }
  //请求完成后打开进度条弹窗
    uni.hideLoading();
    isSlice.value = true;
    actived();
    slice.value.open()
}
const timeId = ref(null);
const count1 = ref(0)
//开始动画
const actived = () => {
  time.value = time.value / 100;
  console.log(time.value);
  timeId.value = setInterval(async() => {
    count1.value++
    if(count1.value%3==0){
      const res = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
    });
    console.log(res);
    if(res.data.start == 7){
      clearInterval(timeId.value)
      uni.removeStorageSync("state");
      uni.removeStorageSync("time");
      uni.removeStorageSync("percent");
      isSlice.value = false;
      uni.removeStorageSync('isSlice')
      percent.value = 0;
      slice.value.close()
      uni.showToast({title:'出错了,请重试',icon:'none'})
    }
    if(!res.data){
      clearInterval(timeId.value)
      uni.removeStorageSync("state");
      uni.removeStorageSync("time");
      uni.removeStorageSync("percent");
      isSlice.value = false;
      uni.removeStorageSync('isSlice')
      percent.value = 0;
    }
  if(res.data.start==1){
    percent.value = 100;
      clearInterval(timeId.value);
      uni.removeStorageSync("state");
      uni.removeStorageSync("time");
      uni.removeStorageSync("percent");
      isSlice.value = false;
      uni.removeStorageSync('isSlice')
      percent.value = 0;
      if(master.value){
        const res = await httpRequest('/api/clipVoiceVideoTime','POST',{
        businessId: uni.getStorageSync("business").businessId,
        taskId:taskId.value
      })
      console.log(res);
      num.value = res.data.maxNum
        masterPopup.value.open()
      }else{
        sliceOk.value.open()
      }
      isOk.value = true
  }
  if(res.data.start==4){
    draftCancel()
    slice.value.close()
    uni.showToast({title:'出错啦,请重试',icon:'error'})
  }
    }
    if (percent.value < 99) {
      percent.value++;
    }
  }, time.value * 1000);
};

const getCurrentTimestamp = () => {
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const timestamp = hours * 3600 + minutes * 60 + seconds;
  return timestamp;
}

const count = ref(5);
const random = ref("");

//全部随机
const randomAll = (e) => {
  if(e.detail.value.length){
    size.value = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]
    color.value = colorList;
  }else{
    size.value = []
    color.value = []
  }
  random.value = e.detail.value;
  
};
const verify = () => {
  console.log(color.value);
  fontColor.value.close();
};
const close = ()=>{
  fontColor.value.close();
  slice.value.close()
  sliceOk.value.close()
}
const labelStr = ref("");
labelStr.value = uni.getStorageSync("label");

//上传素材
const upLoad = async() => {
  uni.vibrateShort()
  const res = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
    });
    if(!res.data){
      isSlice.value = false
      uni.removeStorageSync('isSlice')
    } 
    if(smart.value)uni.navigateTo({ url: `/pageA/index/chooseVideo?page=${page.value}&smart=${smart.value}` });
    if(oneClick.value)uni.navigateTo({ url: `/pageA/index/chooseVideo?page=${page.value}&oneClick=${oneClick.value}` });
    if(master.value)uni.navigateTo({ url: `/pageA/index/chooseVideo?page=${page.value}&master=${master.value}` });
    if(originality.value)uni.navigateTo({ url: `/pageA/index/chooseVideo?page=${page.value}&originality=${originality.value}` });
    if(same.value)uni.navigateTo({ url: `/pageA/index/chooseVideo?page=${page.value}&same=${same.value}` });
    if(publicity.value)uni.navigateTo({ url: `/pageA/index/chooseVideo?page=${page.value}&publicity=${publicity.value}` });
};
const currentDate = () => {
  const date = new Date();
  return `${date.getMonth() + 1}月${date.getDate()}日`;
};
//立即创建
const id = ref("");
const isCreat = ref(false)
const creatVideo1 = async () => {
  if(isCreat.value) return
  isCreat.value = true
  console.log('same'+same.value);
  //判断有没有在进行的任务
  // const ress = await httpRequest("/api/findTaskStart", "POST", {
  //     businessId: uni.getStorageSync("business").businessId,
  //   });
  //   if(ress.data)return uni.showToast({title:'现有未生成的视频',icon:'none'})
    //判断剩余次数是否足够
  const res = await httpRequest('/api/kaById','POST',{
    shopId: uni.getStorageSync("shop")[index.value].shopId,
  })
  if(res.data.useNum<num.value){
    isCreat.value = false
    return uni.showToast({title:'剩余次数不足',icon:'none'})
  }
  if (isSlice.value){
    isCreat.value = false
    return console.log(isSlice.value);
  }
    if (!uni.getStorageSync('videoArr').length){
      isCreat.value = false
      return uni.showToast({ title: "请上传视频", icon: "error" });
    }
    if(!uni.getStorageSync('copy')&&smart.value){
    isCreat.value = false
     return uni.showToast({title:'请上传文案',icon:'none'})
    }
  console.log(max.value);
  //显示loading
  uni.showLoading({
    title: "生成中",
  });
  id.value = uni.getStorageSync("taskId");
  setTimeout(async () => {
    try {
      // const randomColor = color.value[randomIndex(color.value)];
      if (!color.value.length) color.value = colorList;
      await httpRequest('/api/editTaskName','POST',{
        taskId:id.value,
        taskName:taskName.value
      })
     if(smart.value || oneClick.value){
     const texts = uni.getStorageSync("copy")?uni.getStorageSync("copy").map((e) => e.content):'';
     size.value = size.value.length?size.value:['shs.otf','fzjh.ttf','hklj.TTF','mksj.ttf','ssry.ttf','txjz.ttf']
     if(!texts){
        color.value = ''
      }
       const resSmart = httpRequest("/api/clipVideosOne2s", "POST", {
        businessId: uni.getStorageSync("business").businessId,
        texts: style.value?'':texts,
        fontColor: style.value?'':JSON.stringify(color.value),
        ttfs:size.value,
        taskId: id.value,
        musicCateId:selectedMusic.value,
        templateId:''
      });
      console.log(resSmart);
     }else if(master.value){
     const texts = uni.getStorageSync("copy")?uni.getStorageSync("copy").map((e) => e.content):'';
     if(!texts){
        color.value = ''
      }
      size.value = size.value.length?size.value:['shs.otf','fzjh.ttf','hklj.TTF','mksj.ttf','ssry.ttf','txjz.ttf']
       const res3 = httpRequest("/api/synthesisVideoAndCopAndMus3", "POST", {
        businessId: uni.getStorageSync("business").businessId,
        texts: texts||!style.value?texts:'',
        fontColor: !style.value?JSON.stringify(color.value):'',
        ttfs:size.value,
        taskId: id.value,
        maxNum: num.value,
        popVideoId:same.value.popVideoId
      });
      console.log(res3);
     }
      uni.removeStorageSync('product')
      uni.removeStorageSync('videoArr')
      uni.removeStorageSync('copy')
      uni.removeStorageSync('v1')
      uni.removeStorageSync('v2')
      uni.removeStorageSync('v3')
      uni.removeStorageSync('v4')
      uni.removeStorageSync('v5')
      uni.removeStorageSync('v6')
      uni.removeStorageSync('v7')
      uni.removeStorageSync('maxNum')
      uni.removeStorageSync("color");
      uni.removeStorageSync("font");
      uni.removeStorageSync('taskId')
      uni.removeStorageSync('same')
      uni.removeStorageSync('sameTitle')
      uni.removeStorageSync('prevPage')
      uni.removeStorageSync('notTime')
      uni.removeStorageSync('isCross')
      uni.removeStorageSync('textList')
      uni.removeStorageSync('up')
      uni.removeStorageSync('num')
      clearInterval(timeId.value)
      
      uni.redirectTo({ url: `/pageA/index/preview?video=${id.value}&unsynthesized=${num.value}&name=${uni.getStorageSync('name')}` });
      uni.removeStorageSync('name')

    } catch (err) {
      uni.hideLoading();
      uni.showToast({
        title: "生成失败",
        icon: "none",
      });
      console.log(err);
    }
  }, 500);
  
};
const creatVideo = async () => {
  if(!isReady.value) return
  //判断有没有在进行的任务
  // const ress = await httpRequest("/api/findTaskStart", "POST", {
  //     businessId: uni.getStorageSync("business").businessId,
  //   });
  //   if(ress.data)return uni.showToast({title:'现有未生成的视频',icon:'none'})
    //判断剩余次数是否足够
    uni.showLoading({
      title: '请稍后',
      mask: false
    })
  const res = await httpRequest('/api/kaById','POST',{
    shopId: uni.getStorageSync("shop")[index.value].shopId,
  })
  uni.hideLoading()
  if(res.data.useNum<num.value)return uni.showToast({title:'剩余次数不足',icon:'none'})
  if (isSlice.value) return console.log(isSlice.value);
  
  if(!uni.getStorageSync('copy')&&smart.value) return uni.showToast({title:'请上传文案',icon:'none'})
  if(oneClick.value&&!uni.getStorageSync('copy')){
    const OC = await httpRequest("/api/copywriting", "POST", {
        shopCate2Id: shopCate2Id.value,
        shopId: uni.getStorageSync("shop")[index.value].shopId,
        shopName:uni.getStorageSync("shop")[index.value].shopName,
      })
      console.log(OC);
      uni.setStorageSync('copy',OC.data)
  }
    if (!uni.getStorageSync('videoArr').length)return uni.showToast({ title: "请上传视频", icon: "error" });
    id.value = uni.getStorageSync("taskId");

  if(master.value == 1){
    await httpRequest('/api/addTaskTemplateId','POST',{
      id:id.value,
      templateId:templateId.value.id
    })
  }
    //获取切片时长和最大生成数量
    uni.showLoading()
    let tres
    if(!sound.value)sound.value = soundList.value[0]
    if(master.value){
      const resTime = await httpRequest('/api/clipVideoTime2','POST',{
        businessId:uni.getStorageSync("business").businessId
        },100000)
        if (!color.value.length) color.value = [colorList[0]];
        size.value = size.value.length?size.value:['shs.otf','fzjh.ttf','hklj.TTF','mksj.ttf','ssry.ttf','txjz.ttf']
        tres = await httpRequest("/api/getVoiceVideoMaxNum", "POST", {
        businessId: uni.getStorageSync("business").businessId,
        taskId: id.value,
        time:Math.floor(resTime.data),
        fontColor:JSON.stringify(color.value),
        templateId:master.value == 1?templateId.value.id:'',
        soundNum:sound.value.number,
        shopCate2Id:shopCate2Id.value
    });
    }else if(publicity.value){
      if(!topText.value) topText.value = templateId.value.product
      const resTime = await httpRequest('/api/clipVideoTime2','POST',{
        businessId:uni.getStorageSync("business").businessId
        },100000)
        if (!color.value.length) color.value = [colorList[0]];
        size.value = size.value.length?size.value:['shs.otf','fzjh.ttf','hklj.TTF','mksj.ttf','ssry.ttf','txjz.ttf']
        tres = await httpRequest("/api/getVoiceVideoMaxNum4", "POST", {
        businessId: uni.getStorageSync("business").businessId,
        taskId: id.value,
        time:Math.floor(resTime.data),
        fontColor:JSON.stringify(color.value),
        templateId:templateId.value.id,
        soundNum:sound.value.number,
        shopCate2Id:shopCate2Id.value,
        txtTitle:topText.value
    });
    } else{
       tres = await httpRequest("/api/clipVideoTime", "POST", {
        businessId: uni.getStorageSync("business").businessId,
        taskId: id.value,
        time:uni.getStorageSync('same').time?uni.getStorageSync('same').time:0,
        type:smart.value?1:''
      },100000);
    }
    uni.hideLoading()
  uni.setStorageSync("maxNum", tres.data.maxNum);
  num.value = tres.data.maxNum
  max.value = tres.data.maxNum>tres.data.xinMaxNum?tres.data.xinMaxNum:tres.data.maxNum
  let time = tres.data.time
  uni.showModal({
    title: `自动合成`,
    content: `本次合成视频数量 ${num.value} 条,合成需要花一定的时间,可稍后前往剪辑库列表查看最新成品`,
    cancelColor:"#909399",
    cancelText:'取消',
    confirmColor:"#8e54f4",
    confirmText:'确定',
    success: (res) => {
      if(res.confirm){
  console.log(max.value);
  //显示loading
  uni.showLoading({
    title: "生成中",
  });
  
  setTimeout(async () => {
    try {
      // const randomColor = color.value[randomIndex(color.value)];
      if (!color.value.length) color.value = [colorList[0]];
      await httpRequest('/api/editTaskName','POST',{
        taskId:id.value,
        taskName:taskName.value
      })
      
     if(smart.value || oneClick.value || originality.value){
     const texts = uni.getStorageSync("copy")?uni.getStorageSync("copy").map((e) => e.content):'';
     if(!texts){
        color.value = ''
      }
       const resSmart = httpRequest("/api/clipVideosOne2s", "POST", {
        businessId: uni.getStorageSync("business").businessId,
        texts:originality.value?'':texts,
        fontColor:originality.value?'':JSON.stringify(color.value),
        taskId: id.value,
        musicCateId:selectedMusic.value,
        templateId:'',
        type:smart.value?1:'',
        videoNum:num.value
      },10000000);
      console.log(resSmart);
     }else if(same.value){
     const texts = uni.getStorageSync("copy")?uni.getStorageSync("copy").map((e) => e.content):'';
     if(!texts){
        color.value = ''
      }
       const res3 = httpRequest("/api/synthesisVideoAndCopAndMus3", "POST", {
        businessId: uni.getStorageSync("business").businessId,
        texts:texts,
        fontColor: JSON.stringify(color.value),
        taskId: id.value,
        title:sameTitle.value,
        popVideoId:same.value.popVideoId,
        videoNum:num.value
      },10000000);
      console.log(res3);
     }else if(master.value||publicity.value){
      let r = Math.floor(Math.random() * color.value.length)
        if(!sound.value) sound.value = soundList[0]
       const res3 = httpRequest("/api/clipVideosAccordingVoiceTime", "POST", {
        businessId: uni.getStorageSync("business").businessId,
        taskId: id.value,
        musicCateId:selectedMusic.value,
        commands:JSON.stringify(tres.data.command),
        cjs:5,
        
      },10000000);
      console.log(res3);
     }
      uni.removeStorageSync('product')
      uni.removeStorageSync('videoArr')
      uni.removeStorageSync('copy')
      uni.removeStorageSync('v1')
      uni.removeStorageSync('v2')
      uni.removeStorageSync('v3')
      uni.removeStorageSync('v4')
      uni.removeStorageSync('v5')
      uni.removeStorageSync('v6')
      uni.removeStorageSync('v7')
      uni.removeStorageSync('maxNum')
      uni.removeStorageSync("color");
      uni.removeStorageSync('taskId')
      uni.removeStorageSync('same')
      uni.removeStorageSync('sameTitle')
      uni.removeStorageSync('prevPage')
      uni.removeStorageSync('notTime')
      uni.removeStorageSync('voiceArr')
      uni.removeStorageSync('isItem')
      uni.removeStorageSync('templateId')
      uni.removeStorageSync('isSwitch')

      clearInterval(timeId.value)
      if(master.value){
      uni.redirectTo({ url: `/pageA/index/preview?video=${id.value}&unsynthesized=${num.value}&name=${uni.getStorageSync('name')}&master=${master.value}` });
      }
      uni.redirectTo({ url: `/pageA/index/preview?video=${id.value}&unsynthesized=${num.value}&name=${uni.getStorageSync('name')}` });
      uni.removeStorageSync('name')

    } catch (err) {
      uni.hideLoading();
      uni.showToast({
        title: "生成失败",
        icon: "none",
      });
      console.log(err);
    }
  }, 500);
      }else{
        return
      }
    }
  })
  
};

//达人探店生成视频
const creatVideo2 = async() => {
  uni.showLoading({
      title: '请稍后',
      mask: true
    })
  const res = await httpRequest('/api/kaById','POST',{
    shopId: uni.getStorageSync("shop")[index.value].shopId,
  })
  uni.hideLoading()
  if(res.data.useNum<num.value)return uni.showToast({title:'剩余次数不足',icon:'none'})
  if (isSlice.value) return console.log(isSlice.value);
  if (!uni.getStorageSync('videoArr').length)return uni.showToast({ title: "请上传视频", icon: "error" });

  uni.showLoading({
    title: "生成中",
  });
  await httpRequest('/api/editTaskName','POST',{
        taskId:id.value,
        taskName:taskName.value
      })
  const res1 = await httpRequest('/api/synthesisVideoAndCopAndMusAndvoice2','POST',{
    businessId:uni.getStorageSync("business").businessId,
    taskId:id.value,
    musicCateId:selectedMusic.value,
    videoNum:num.value
  })
  uni.removeStorageSync('product')
      uni.removeStorageSync('videoArr')
      uni.removeStorageSync('copy')
      uni.removeStorageSync('v1')
      uni.removeStorageSync('v2')
      uni.removeStorageSync('v3')
      uni.removeStorageSync('v4')
      uni.removeStorageSync('v5')
      uni.removeStorageSync('v6')
      uni.removeStorageSync('v7')
      uni.removeStorageSync('maxNum')
      uni.removeStorageSync("color");
      uni.removeStorageSync('taskId')
      uni.removeStorageSync('same')
      uni.removeStorageSync('sameTitle')
      uni.removeStorageSync('prevPage')
      uni.removeStorageSync('notTime')
      uni.removeStorageSync('voiceArr')
      uni.removeStorageSync('isItem')
      uni.removeStorageSync('templateId')
      uni.removeStorageSync('isSwitch ')

      clearInterval(timeId.value)
      uni.redirectTo({ url: `/pageA/index/preview?video=${id.value}&unsynthesized=${num.value}&name=${uni.getStorageSync('name')}` });
      uni.removeStorageSync('name')
}

const isChecked = ref(false);
const switch2Change = async (e) => {
  if (e.detail.value) {
    uni.removeStorageSync("active");
    // await httpRequest("/api/delStaging", "POST", {
    //   businessId: uni.getStorageSync("business").businessId,
    // });
    isActive.value = false;
  }
  isChecked.value = e.detail.value;
  console.log(isChecked.value);
};
const formatTimestamp = (timestamp) => {
  const date = new Date(timestamp);
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const formattedTime = `${month}/${day} ${hours}:${minutes}`;
  return formattedTime;
}
// const gotoScript = async () => {
//   if (flag.value == 1) {
//     uni.removeStorageSync("v1");
//     uni.removeStorageSync("v2");
//     uni.removeStorageSync("v3");
//     uni.removeStorageSync("flag");
//     // store.clearVideo()
//     // await httpRequest("/api/delStaging", "POST", {
//     //   businessId: uni.getStorageSync("business").businessId,
//     // });
//   }
//   uni.navigateTo({ url: `/pageA/index/script?index=${index.value}` });
// };
const gotoMusic = () => {
  uni.navigateTo({ url: `/pageA/index/music?index=${index.value}` });
};
const gotoCopy = () => {
  uni.vibrateShort()
  // uni.removeStorageSync('copy')
  if (oneClick.value) {
    uni.navigateTo({ url: `/pageA/index/copywriting?oneClick=${oneClick.value}` });
  }
  if (smart.value) {
    uni.navigateTo({ url: `/pageA/index/copywriting?index=${index.value}&smart=${smart.value}` });    
  }
  if(same.value){
    uni.navigateTo({ url: `/pageA/index/copywriting?index=${index.value}&same=${same.value}` });    
  }
};
const gotoWebView = () => {
  uni.vibrateShort()
  uni.navigateTo({ url: `/pageA/index/copyWebView` });
}
const gotoTiele = () => {
  uni.navigateTo({ url: `/pageA/index/title?index=${index.value}` });
};
const gotoSetup = () => {
  uni.navigateTo({ url: `/pageA/index/videoSetup?index=${index.value}` });
};
const fontColor = ref(null);
const getFontColor = () => {
  uni.vibrateShort()
  fontColor.value.open("bottom");
};
const colorList = [
  {
  id:1,
  img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_07.png',
  bgc:'',
  ttfs:'mksj.ttf',
  color:'#ffe81d',
  strokeColor:'#000000'
  },
  {
    id:2,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_08.png',
    bgc:'',
    ttfs:'mksj.ttf',
    color:'#fe679d',
    strokeColor:'#ffffff'
  },
  {
    id:3,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_09.png',
    bgc:'',
    ttfs:'mksj.ttf',
    color:'#000000',
    strokeColor:'#ffffff'
  },
  {
    id:4,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_10.png',
    bgc:'',
    ttfs:'W8.TTF',
    color:'#ffe81d',
    strokeColor:'#000000'
  },
  {
    id:5,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_11.png',
    bgc:'',
    ttfs:'W8.TTF',
    color:'#fe679d',
    strokeColor:'#ffffff'
  },
  {
    id:6,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_12.png',
    bgc:'',
    ttfs:'W8.TTF',
    color:'#000000',
    strokeColor:'#ffffff'
  },
  {
    id:7,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_13.png',
    bgc:'',
    ttfs:'txjz.ttf',
    color:'#ffe81d',
    strokeColor:'#000000'
  },
  {
    id:8,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_14.png',
    bgc:'',
    ttfs:'txjz.ttf',
    color:'#fe679d',
    strokeColor:'#ffffff'
  },
  {
    id:9,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_15.png',
    bgc:'',
    ttfs:'txjz.ttf',
    color:'#000000',
    strokeColor:'#ffffff'
  },
  {
    id:10,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_01.png',
    bgc:'#ffdf02',
    ttfs:'wyW8.TTF',
    color:'#000000',
    strokeColor:''
  },
  {
    id:11,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_02.png',
    bgc:'#ffdf02',
    ttfs:'ztq.ttf',
    color:'#000000',
    strokeColor:''
  },
  {
    id:12,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_03.png',
    bgc:'#ffdf02',
    ttfs:'yssyftjkt.ttf',
    color:'#000000',
    strokeColor:''
  },
  {
    id:13,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_04.png',
    bgc:'#FFFFFF',
    ttfs:'yssyftjkt.ttf',
    color:'#000000',
    strokeColor:'#000000'
    },
    {
    id:14,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_05.png',
    bgc:'#FFFFFF',
    ttfs:'ztq.ttf',
    color:'#000000',
    strokeColor:'#000000'
    },
    {
    id:15,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_06.png',
    bgc:'#FFFFFF',
    ttfs:'wyW8.TTF',
    color:'#000000',
    strokeColor:'#000000'
    },
  
];
const font = ref(uni.getStorageSync('font')||[]);
const size = ref(uni.getStorageSync('size')||[]);

//选择字体
const chooseSize = (i) => {
    if (size.value.includes(i)) {
    size.value = size.value.filter((e) => e != i);
    (size.value.length==15)?colorChecked.value = true:colorChecked.value = false
    color.value = color.value.filter(e=>e.id != colorList[i].id)
    console.log(color.value);
    return;
  }
  uni.vibrateShort()
  size.value.push(i)
  color.value.push(colorList[i])
  console.log(color.value);

  if(size.value.length==15){
    colorChecked.value = true
  }else{
    colorChecked.value = false
  }
}
//选择颜色
const chooseFont = (e) => {
  if (font.value.includes(e)) {
    font.value = font.value.filter((i) => i != e);
    color.value = color.value.filter(
      (i) => i.color != colorList[e - 1].color || i.strokeColor != colorList[e - 1].strokeColor
    );
    (size.value.length==6&&color.value.length==13)?colorChecked.value = true:colorChecked.value = false
    return;
  }
  uni.vibrateShort()
  font.value.push(e);
  color.value.push({
    color: colorList[e - 1].color,
    strokeColor: colorList[e - 1].strokeColor,
  });
  (size.value.length==6&&color.value.length==13)?colorChecked.value = true:colorChecked.value = false
  
  console.log(color.value);
  console.log(font.value);
};
onUnload(async () => {
  if(audio){
    audio.stop()
    audio = ''
  }
  console.log("页面卸载");
  if(uni.getStorageSync('copy')){
    uni.setStorageSync('color',color.value)
    uni.setStorageSync('font',font.value)
  }else{
    uni.removeStorageSync('color')
    uni.removeStorageSync('font')
  }
  if(sameTitle.value){
    uni.setStorageSync('sameTitle',sameTitle.value)
  }
  if(same.value){
    uni.setStorageSync("prevPage", 'same');
  }else if(master.value){
    uni.setStorageSync("prevPage", 'master');
  }else{
    uni.setStorageSync("prevPage", 'index');
  }
  // uni.removeStorageSync("title");
  // uni.removeStorageSync("label");
  // uni.removeStorageSync("poi");
  // uni.removeStorageSync("videoArr1");
  // uni.removeStorageSync("videoArr2");
  // uni.removeStorageSync("videoArr3");
  // uni.removeStorageSync("active");
  // uni.removeStorageSync("music");
  // uni.removeStorageSync("v1");
  // uni.removeStorageSync("v2");
  // uni.removeStorageSync("v3");
  // uni.removeStorageSync("v4");
  // uni.removeStorageSync("v5");
  // uni.removeStorageSync("v6");
  // uni.removeStorageSync("v7");
  // uni.removeStorageSync("videoArr");
  // uni.removeStorageSync("flag");
  // uni.removeStorageSync("voice");
  clearInterval(timeId.value);
  console.log(isSlice.value);
  if(isSlice.value){
  uni.setStorageSync("percent", percent.value);
  uni.setStorageSync("isSlice", isSlice.value);
  }else{
    percent.value = 0
    console.log(isSlice.value);
  }
  // store.clearVideo()
  // await httpRequest("/api/delStaging", "POST", {
  //   businessId: uni.getStorageSync("business").businessId,
  // });
});
</script>

<style scoped lang="scss">
.page {
  background-color: rgba(246, 248, 251, 1);
  padding: 30rpx;
  min-height: 1600rpx;
  padding-bottom: 200rpx;
  .item1{
        width: 100%;
        height: 132rpx;
        border-radius: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        margin-bottom: 30rpx;
        padding: 30rpx;
        box-sizing: border-box;
        .flex-left{
            display: flex;
            align-items: center;
            font-size: 32rpx;
            color: rgb(48,49,51);
        }
        .flex-right{
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: rgb(144,147,153);
            .uni-input{
              width: 400rpx;
              height: 38rpx;
              font-size: 28rpx;
              text-align: right;
              color: #909399;
            }
        }
    }
  .bgi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 408rpx;
  }
  .quest {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 690rpx;
    height: 214rpx;
    padding: 36rpx 30rpx;
    margin: 290rpx 0 24rpx 0;
    background-color: #fff;
    border-radius: 16rpx;
    .title{
      height: 100%;
      width: 430rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title-text{
      color: rgb(69,70,74);
      font-size: 30rpx;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 控制显示的行数 */
      -webkit-box-orient: vertical;
    }
    .play-data{
    display: flex;
    .plays{
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
    margin-right: 36rpx;
    }
  }
  }
}
  .top {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    .top-title {
      display: flex;
      align-items: center;
      // height: 96rpx;
      padding: 42rpx 30rpx;
      .uni-input{
        width: 600rpx;
        height: 70rpx;
        font-size: 28rpx;
        text-align: right;
        color: #909399;
      }
    }
    .number {
      box-sizing: border-box;
      padding: 0 30rpx 30rpx;
      overflow-x: scroll;
      white-space: nowrap;

      .video-box {
        position: relative;
        display: inline-block;
        width: 160rpx;
        height: 138rpx;
        text-align: center;
        line-height: 138rpx;
        font-size: 28rpx;
        color: rgb(69, 70, 74);
        background-color: rgb(250, 245, 255);
        border-radius: 12rpx;
        margin-right: 18rpx;
        .mark {
          position: absolute;
          width: 62rpx;
          height: 36rpx;
          font-size: 24rpx;
          line-height: 36rpx;
          text-align: center;
          color: #fff;
          background-color: rgb(197, 163, 255);
          border-radius: 12rpx 0 12rpx 0;
        }
      }
    }
    .top-content {
      font-size: 28rpx;
      padding: 0 30rpx 42rpx;
      color: rgb(48, 49, 51);
      .top-ai {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 28rpx;
      }
      .top-material {
        // height: 80rpx;
        border-radius: 8rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin: 12rpx 0;
        // padding: 0 12rpx;
        font-size: 28rpx;
      }
      .middle-items {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;
      background-color: #fff;
      margin-top: 24rpx;
      border-radius: 16rpx;
      font-size: 30rpx;
      color: rgb(48, 49, 51);
      .uni-input{
        width: 400rpx;
        height: 38rpx;
        font-size: 28rpx;
        text-align: right;
        color: #909399;
      }
      .items-img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 13rpx;
        vertical-align: bottom;
      }
    }
    }
  }
  .bottom {
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: 68rpx;
    padding-top: 10rpx;
    .bottom-btn {
      height: 88rpx;
      width: 686rpx;
      background-color: rgba(142, 84, 244, 1);
      border-radius: 8rpx;
      font-size: 32rpx;
      color: #fff;
      line-height: 88rpx;
    }
  }
  .middle {
    .middle-items {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;
      background-color: #fff;
      margin-top: 24rpx;
      padding: 0 24rpx;
      border-radius: 16rpx;
      font-size: 28rpx;
      color: rgb(48, 49, 51);
      .items-img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 13rpx;
        vertical-align: bottom;
      }
    }
  }
}
.close {
  width: 100%;
  height: 108rpx;
  text-align: center;
  line-height: 108rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: rgb(48, 49, 51);
  .close-btn {
    position: absolute;
    top: 30rpx;
    left: 30rpx;
    width: 48rpx;
    height: 48rpx;
  }
}
// .popup-middle {
//   overflow-y: scroll;
//   box-sizing: border-box;
//   width: 100%;
//   height: 600rpx;
//   padding: 30rpx;
//   border-top: 1rpx solid rgb(220, 223, 230);
//   border-bottom: 1rpx solid rgb(220, 223, 230);
//   .font {
//     display: inline-block;
//     position: relative;
//     width: 206rpx;
//     height: 108rpx;
//     background-color: rgba(142, 84, 244, 0.05);
//     text-align: center;
//     line-height: 108rpx;
//     font-size: 32rpx;
//     font-weight: 700;
//     // -webkit-text-stroke: 2rpx #000;
//     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
//     color: rgb(254, 222, 9);
//     border-radius: 12rpx;
//     border: 2rpx solid #fff;
//     .font-img {
//       width: 56rpx;
//       height: 34rpx;
//       position: absolute;
//       top: 0;
//       right: 0;
//     }
//   }
// }
.popup-middle {
  overflow-y: scroll;
  box-sizing: border-box;
  width: 100%;
  height: 800rpx;
  padding: 30rpx;
  border-top: 1rpx solid rgb(220, 223, 230);
  border-bottom: 1rpx solid rgb(220, 223, 230);
  padding-bottom: 200rpx;
  .tim-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    .tim-voice{
      width: 618rpx;
      height: 124rpx;
      border-radius: 16rpx;
      background-color: rgb(249,249,249);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      box-sizing: border-box;
      border: 1px solid transparent;
      .tim-character{
        display: flex;
        align-items: center;
        font-size: 32rpx;
        .tim-name{
          width: 64rpx;
          height: 64rpx;
          background-color: rgb(142, 84, 244);
          border-radius: 50%;
          text-align: center;
          line-height: 64rpx;
          font-size: 20rpx;
          color: #fff;
          margin-right: 18rpx;
        }
      }
      .tim-play{
      font-size: 32rpx;
      font-weight: 500;
      color: rgb(142, 84, 244);
      
    }
    }
    
  }
  .font {
    display: inline-block;
    position: relative;
    width: 210rpx;
    height: 160rpx;
    background-color: rgba(142, 84, 244, 0.05);
    text-align: center;
    line-height: 210rpx;
    font-size: 32rpx;
    font-weight: 700;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: rgb(254, 222, 9);
    border-radius: 12rpx;
    border: 2rpx solid #fff;
    margin: 0 25rpx 30rpx 0;
    &:nth-child(3n){
        margin-right: 0;
    }
    .font-img {
      width: 56rpx;
      height: 34rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
.font-active {
  border: 2rpx solid rgba(142, 84, 244, 1) !important;
}
.verify {
  display: flex;
  height: 98rpx;
  align-items: center;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: rgb(144, 147, 153);
  white-space: nowrap;
  padding-bottom: 68rpx;
  .verify-btn {
    margin: 0;
    padding: 0;
    width: 596rpx;
    height: 88rpx;
    background-color: rgba(142, 84, 244, 1);
    border-radius: 8rpx;
    margin-left: 20rpx;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    line-height: 88rpx;
  }
}
.isready{
  background-color: rgb(241,241,241) !important;
  color: rgb(192,196,204) !important;
}
.slice-popup{
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 582rpx;
  height: 182rpx;
  border-radius: 16rpx;
  background-color: #fff;
  padding: 36rpx;
  .slice-text{
    font-size: 30rpx;
    color: rgb(142,84,244);
    margin-bottom: 18rpx;
  }
}
.sliceok-popup{
  width: 582rpx;
  height: 538rpx;
  border-radius: 16rpx;
  background-color: #fff;
  padding: 42rpx;
  box-sizing: border-box;
  .close1 {
  width: 100%;
  text-align: center;
  font-size: 36rpx;
  font-weight: 700;
  color: rgb(142, 84, 244);
  margin-bottom:42rpx;
  .close-btn {
    position: absolute;
    left: 30rpx;
    width: 48rpx;
    height: 48rpx;
  }
}
.tips{
  font-size: 28rpx;
  color: rgb(144,147,153);
  margin: 42rpx 0 48rpx 0;
}
.middle-items {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin-top: 42rpx;
      border-radius: 16rpx;
      font-size: 30rpx;
      color: rgb(48, 49, 51);
    }
    .craft{
      width: 350rpx;
      height: 80rpx;
      background-color: rgb(142,84,244);
      border-radius: 8rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #fff;
      margin-top: 60rpx;
    }
}
.alert-dialog{
  width: 582rpx;
  // height: 344rpx;
  background-color: #fff;
  border-radius: 16rpx;
  // padding-top: 36rpx;
  // box-sizing: border-box;
  overflow: hidden;
  .alert-title{
    font-size: 34rpx;
    color: rgb(48,49,51);
    margin: 36rpx 36rpx 18rpx 36rpx;
    font-weight: 500;
  }
  .alert-time{
    font-size: 30rpx;
    color: rgb(144, 147, 153);
    margin: 18rpx 36rpx 36rpx;
  }
  .alert-btn{
    display: flex;
    height: 116rpx;
    border-top: 1px solid rgb(235,238,245);
    .alert-quxiao{
      width: 290rpx;
      height: 100%;
      border-right: 1px solid rgb(235,238,245);
      text-align: center;
      line-height: 116rpx;
      font-size: 34rpx;
      color: rgb(144, 147, 153);
    }
    
    .alert-queren{
      width: 290rpx;
      height: 100%;
      text-align: center;
      line-height: 116rpx;
      font-size: 34rpx;
      color: rgb(142, 84, 244);
    }
    
  }
}
.content{
  width: 100%;
  height: 1000rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    border-bottom: 1px solid rgb(220, 223, 230);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .from{
    overflow-y: hidden;
    width: 690rpx;
    height: 235rpx;
    background-color: rgb(249,249,249);
    border-radius: 16rpx;
    padding: 0 30rpx;
    // padding-bottom: 356rpx;
    margin: 30rpx;
    box-sizing: border-box;
    .name{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 630rpx;
      height: 116rpx;
      font-size: 30rpx;
      color: rgb(69,70,74);
      border-bottom: 1px solid rgb(220, 223, 230);
      &:last-child{
        border: none;
      }
      .input{
        text-align: right;
      }
    }

  }
  .tips{
    font-size: 24rpx;
    color: rgb(252,139,0);
    margin: 30rpx;
  }
  .item{
    width: 612rpx;
    // margin: 30rpx;
    border-radius: 24rpx;
    border: 1px solid rgb(220,223,230);
    .name{
      // width: 630rpx;
      margin: 36rpx 30rpx;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: rgb(144,147,153);
      .text{
        color: rgb(69,70,74);
      }
    }
  }
  .flxed{
          width: 100%;
          height: 166rpx;
          position: fixed;
          bottom: 0;
          left: 0;
          background-color: #fff;
          .tianjia{
            width: 690rpx;
            height: 88rpx;
            margin: 10rpx 30rpx 0;
            font-size: 32rpx;
            text-align: center;
            line-height: 88rpx;
            background-color: rgba(241, 241, 241, 1);
            color: rgb(192,196,204);
          }
        }
}

.tianjia-style{
      background-color: rgb(142,84,244) !important;
      color: #fff !important;
    }
    .active-tem{
  border: 1px solid rgb(142, 84, 244) !important;
}
</style>
